<template>
  <div class='list-box'>
    <div class='list-header'>
      <p>
        <el-select v-model='value' placeholder='全部'>
          <el-option
            v-for='item in options'
            :key='item'
            :label='item'
            :value='item'
          >
          </el-option>
        </el-select>
        <el-input
          placeholder='请输入关键词'
          prefix-icon='el-icon-search'
          v-model='inputValue'
        >
        </el-input>
      </p>
      <p>
        <el-button type='warning' @click="addProject">新增</el-button>
        <el-button type='warning' @click="editProject">编辑</el-button>
        <el-button type='danger' @click='deleteBtn'>删除</el-button>
      </p>
    </div>
    <el-table
      :data='list'
      border
      @selection-change='handleSelectionChange'
      style='width: 100% margin-top: 20px'
    >
      <el-table-column
        type='selection'
        header-align='center'
        align='center'
        width='55'
      >
      </el-table-column>
      <el-table-column
        label='编号'
        header-align='center'
        align='center'
        width='160
      '
      >
        <template slot-scope='scope'>
          <el-link type='primary' @click="showProject(scope.row)">{{ scope.row.id }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        prop='name'
        header-align='center'
        align='center'
        label='竞对名称'
      >
      </el-table-column>
      <el-table-column
        prop='person'
        header-align='center'
        align='center'
        label='销售人员'
      >
      </el-table-column>
      <el-table-column
        prop='layer'
        header-align='center'
        align='center'
        label='对接层级'
      >
      </el-table-column>
      <el-table-column
        prop='addr'
        header-align='center'
        align='center'
        label='工厂地址'
      >
      </el-table-column>
      <el-table-column
        prop='plan'
        header-align='center'
        align='center'
        label='主推方案'
      >
      </el-table-column>
      <el-table-column
        prop='isCooperation'
        header-align='center'
        align='center'
        label='前期是否有合作'
      >
      </el-table-column>
      <el-table-column
        prop='cooperationInfo'
        header-align='center'
        align='center'
        label='合作情况'
      >
      </el-table-column>
      <el-table-column
        prop='keyRelationships'
        header-align='center'
        align='center'
        label='关键关系人或支持者'
      >
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :total="1000">
      </el-pagination>
    </div>
    <StakeholdersList2Dialog ref="StakeholdersList2Dialog" />
  </div>
</template>

<script>
import StakeholdersList2Dialog from './StakeholdersList2Dialog.vue'
export default {
  components: { StakeholdersList2Dialog },
  data() {
    return {
      value: '',
      inputValue: '',
      list: [
        {
          id: '1',
          name: 'DW',
          person: 'XXX',
          layer: '项目销售主要对接，副总经理XX多次拜访',
          addr: '1、天津；2、南通；3、沈阳；4、广东；',
          plan: '墙面夹芯板+DW19',
          isCooperation: '否',
          cooperationInfo: '否',
          keyRelationships: 'XXX',
          baseInfo: [
            {
              id: '1',
              name: 'DW',
              person: 'XXX',
              layer: '项目销售主要对接，副总经理XX多次拜访',
              addr: '1、天津；2、南通；3、沈阳；4、广东；',
              plan: '墙面夹芯板+DW19',
              isCooperation: '否',
              cooperationInfo: '否',
              keyRelationships: 'XXX'
            },
            {
              id: '1',
              name: 'DW',
              person: 'XXX',
              layer: '项目销售主要对接，副总经理XX多次拜访',
              addr: '1、天津；2、南通；3、沈阳；4、广东；',
              plan: '墙面夹芯板+DW19',
              isCooperation: '否',
              cooperationInfo: '否',
              keyRelationships: 'XXX'
            },
            {
              id: '3',
              name: '',
              person: '',
              layer: '',
              addr: '',
              plan: '',
              isCooperation: '',
              cooperationInfo: '',
              keyRelationships: ''
            }
          ],
          keyInfo: [
            {
              id: 1,
              dimension: '产品价格',
              weight: 58,
              wsd: 12,
              dw: 24,
              btl: 36,
              dfc: 48,
              des: 'xxxxxxxxxxxxxxxxxxxxxxxx'
            },
            {
              id: 2,
              dimension: '付款',
              weight: 58,
              wsd: 12,
              dw: 24,
              btl: 36,
              dfc: 48,
              des: 'xxxxxxxxxxxxxxxxxxxxxxxx'
            },
            {
              id: 3,
              dimension: '账期',
              weight: 58,
              wsd: 12,
              dw: 24,
              btl: 36,
              dfc: 48,
              des: 'xxxxxxxxxxxxxxxxxxxxxxxx'
            },
            {
              id: 4,
              dimension: '产品质量',
              weight: 58,
              wsd: 12,
              dw: 24,
              btl: 36,
              dfc: 48,
              des: 'xxxxxxxxxxxxxxxxxxxxxxxx'
            }
          ],
          swot: {
            advantage: '',
            disadvantages: '',
            opportunity: '',
            threaten: ''
          }
        }
      ],
      options: [
        '项目编号',
        '项目名称',
        '项目描述',
        '负责人',
        '创建日期',
        '最后修改日期',
        '其他'
      ],
      multipleSelection: []
    }
  },
  mounted() {},
  methods: {
    handleSelectionChange(val, a) {
      this.multipleSelection = val
    },
    deleteBtn() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择操作行')
      } else {
        this.multipleSelection.map((obj) => {
          for (let i = this.list.length; i >= 0; i--) {
            const index = this.list.findIndex((item) => item.id === obj.id)
            if (index !== -1) this.list.splice(index, 1)
          }
        })
      }
    },
    showProject(item) {
      this.$refs.StakeholdersList2Dialog.handleOpen('show', item)
    },
    addProject() {
      this.$refs.StakeholdersList2Dialog.handleOpen('add', [])
    },
    editProject() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择操作行')
      } else {
        this.$refs.StakeholdersList2Dialog.handleOpen('edit', this.multipleSelection[0])
      }
    }
  }
}
</script>
<style>
.list-box .list-header {
  margin-bottom: 15px;
  overflow: hidden;
}
.list-box .list-header > h2 {
  width: 50%;
  float: left;
}
.list-box .list-header > p:nth-of-type(1) {
  width: 50%;
  float: left;
}
.list-box .list-header > p:nth-of-type(1) .el-select {
  width: 140px;
}
.list-box .list-header > p:nth-of-type(2) {
  width: 50%;
  float: right;
  text-align: right;
}
.list-box .list-header > p:nth-of-type(1) .el-input {
  width: 250px;
  display: inline-block;
}
.list-box .el-button {
  padding: 8px 20px;
}
.list-box .el-button--warning, .list-box .el-button--warning:focus, .list-box .el-button--warning:hover {
  background: #ff8000;
  border-color: #ff8000;
}
.list-box .el-link--inner {
 padding: 0 10px;
}
.list-box .el-table .el-table__cell {
  padding: 2px 0;
}
.list-box .el-table thead {
  color: #000000;
}
.list-box .el-table--border .el-table__cell,
.list-box .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #000000;
}
.list-box .el-table td.el-table__cell,
.list-box  .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #000000;
}

.list-box  .el-table--border,
.list-box  .el-table--group {
  border: 2px solid #000000;
}
.list-box  .el-table {
  color: #000000;
}
.list-box .page-box {
  margin-top: 10PX;
}
.list-box .page-box .el-pagination {
  text-align: right;
}
</style>
